<sqx-title message="i18n:jobs.restorePageTitle" />
<sqx-layout innerWidth="70" layout="main" titleIcon="backup" titleText="i18n:jobs.restoreTitle">
    <ng-container>
        <sqx-list-view innerWidth="70rem">
            @if (restoreJob | async; as job) {
                <div class="card section">
                    <div class="card-header">
                        <div class="row gx-2 align-items-center">
                            <div class="col-auto">
                                @if (job.status === "Started") {
                                    <div class="restore-status restore-status-pending spin"><i class="icon-hour-glass"></i></div>
                                }

                                @if (job.status === "Failed") {
                                    <div class="restore-status restore-status-failed"><i class="icon-exclamation"></i></div>
                                }

                                @if (job.status === "Completed") {
                                    <div class="restore-status restore-status-success"><i class="icon-checkmark"></i></div>
                                }
                            </div>

                            <div class="col">
                                <h3>{{ "jobs.restoreLastStatus" | sqxTranslate }}</h3>
                            </div>

                            <div class="col text-end restore-url">{{ job.url }}</div>
                        </div>
                    </div>

                    <div class="card-body">
                        @for (row of job.log; track row) {
                            <div>{{ row }}</div>
                        }
                    </div>

                    <div class="card-footer small text-muted">
                        <div class="row">
                            <div class="col">{{ "jobs.restoreStartedLabel" | sqxTranslate }}: {{ job.started | sqxISODate }}</div>

                            @if (job.stopped) {
                                <div class="col text-end">{{ "jobs.restoreStoppedLabel" | sqxTranslate }}: {{ job.stopped | sqxISODate }}</div>
                            }
                        </div>
                    </div>
                </div>
            }

            <div class="table-items-row table-items-row-summary">
                <form [formGroup]="restoreForm.form" (ngSubmit)="restore()">
                    <div class="row gx-2">
                        <div class="col">
                            <sqx-control-errors for="url" />
                            <input class="form-control" formControlName="url" placeholder="{{ 'jobs.restoreLastUrl' | sqxTranslate }}" />
                        </div>

                        <div class="col">
                            <sqx-control-errors for="name" />
                            <input class="form-control" formControlName="name" placeholder="{{ 'jobs.restoreNewAppName' | sqxTranslate }}" />
                        </div>

                        <div class="col-auto">
                            <button class="btn btn-success" [disabled]="restoreForm.hasNoUrl | async" type="submit">
                                {{ "jobs.restore" | sqxTranslate }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </sqx-list-view>
    </ng-container>
    <ng-template sidebarMenu>
        <div class="panel-nav">
            <a
                class="panel-link"
                attr.aria-label="{{ 'common.help' | sqxTranslate }}"
                queryParamsHandling="preserve"
                replaceUrl="true"
                routerLink="help"
                routerLinkActive="active"
                sqxTourStep="help"
                title="i18n:common.help"
                titlePosition="left">
                <i class="icon-help2"></i>
            </a>
        </div>
    </ng-template>
</sqx-layout>
<router-outlet></router-outlet>
